<template>
  <div class="box">
    <el-icon ><Expand /></el-icon>
    <!-- <el-icon ><Fold /></el-icon> -->
    <h3>外卖管理系统</h3>
    <el-dropdown split-button type="primary" @command="handlerCommand">
      欢迎：{{ loginInfo.nickname || loginInfo.contact }}
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="personal">个人中心</el-dropdown-item>
          <el-dropdown-item command="changePassword">修改密码</el-dropdown-item>
          <el-dropdown-item command="loginOut">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script>
export default {

  data() { 
    return {
      loginInfo: {}
    }
  },
  methods: { 

    handlerCommand(command) {
      switch (command) {
        case "personal":
          this.$router.push("/personal");
          break;
        case "changePassword":
          
          break;
        case "loginOut":
        sessionStorage.removeItem("businessInfo");
          this.$router.push("/login");
          break;
      }
    }
  },
  created() { 
    // 从本地存储中获取商家登录的信息
    let info = sessionStorage.getItem("businessInfo");
    if (!info) {
      this.$router.push("/login");
      return;
    }
    this.loginInfo = JSON.parse(info);
  }
};
</script>

<style scoped>
.box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}
.box h3{
    font-size: 30px;
    color: #fff;
    letter-spacing: 1em;
}
.el-icon{
  color: #fff;
  font-size: 30px;
  cursor: pointer;
}
</style>
